<template>
  <a-tabs destroy-on-hide type="rounded">
    <a-tab-pane v-for="(items, key) in sysNoticeTypeList" :key="key">
      <template #title>
        <span>{{ key }}({{ items.length }})</span>
      </template>
      <div v-if="items && items.length" style="padding: 12px">
        <div v-for="(item, index) in items" :key="index" class="notice-item" @click="handleReadNotice(item)">
          <div style="flex: 1">
            <a-link href="#">{{ item.title }}</a-link>
            <div>
              <span style="color: var(--color-neutral-6); font-size: 13px">{{ item.sendTime }}</span>
            </div>
          </div>
          <dict-tag :options="sys_message_type" :value="item.priority" />
        </div>
        <a-button long style="margin-top: 10px" type="dashed" @click="handleToAnnouncement">查看更多</a-button>
      </div>
    </a-tab-pane>
  </a-tabs>
</template>
<script lang="ts" setup>
import { editByAntIdAndUserId } from "@/api/monitor/announcementSend";

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_message_type } = toRefs<any>(proxy?.useDict("sys_message_type"));

defineProps({
  sysNoticeTypeList: {
    type: [Object as Record<string, any>],
    required: true
  }
});

const handleToAnnouncement = () => {
  proxy?.$router.push({
    path: "/monitor/userAnnouncement"
  });
};

const emit = defineEmits<{
  (event: "update"): void;
}>();

const handleReadNotice = async (item: any) => {
  if (item.openType === "component") {
    // 组件
    proxy?.$router.push({
      path: item.openPage
    });
  } else if (item.openType === "url") {
    // 链接
    window.open(item.openUrl);
  }
  // 更新通知公告状态已读
  await editByAntIdAndUserId(item.id);
  emit("update");
};
</script>
<style lang="less" scoped>
:deep(.arco-popover-popup-content) {
  padding: 0;
}

:deep(.arco-list-item-meta) {
}

:deep(.arco-tabs-nav) {
  padding: 10px;
  border-bottom: 1px solid var(--color-neutral-3);
}

:deep(.arco-tabs-content) {
  padding-top: 0;

  .arco-result-subtitle {
    color: rgb(var(--gray-6));
  }
}

.notice-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
}
</style>
